﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = null;
}

<link href="~/lib/layui/css/layui.css" rel="stylesheet" />
<script src="~/lib/layui/layui.js"></script>
<script src="~/js/js.cookie.js"></script>
<script src="~/js/moment.js"></script>
<script src="~/lib/jquery/dist/jquery.js"></script>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Quick Start - Layui</title>
    <!-- 引入 layui.css -->
    <link href="//unpkg.com/layui@2.9.20/dist/css/layui.css" rel="stylesheet">
</head>
<body>
    <!--弹出框-->
    <div style="padding:20px;" id="popup">
        <form class="layui-form" lay-filter="demo-val-filter" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">节点编码</label>
                <div class="layui-input-block">
                    <input type="text" name="nodeEncoding" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">节点名称</label>
                <div class="layui-input-block">
                    <input type="text" name="departmentName" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">部门上级</label>
                <div class="layui-input-block">
                    <select id="parentSelect" name="parentId" disabled></select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">企业</label>
                <div class="layui-input-block">
                    <select id="mySelect" name="enterpriseId"></select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">部门状态</label>
                <div class="layui-input-block">
                    <select name="departmentStatus">
                        <option value="0">请选择</option>
                        <option value="1">有效</option>
                        <option value="2">无效</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="submit" id="component" class="layui-btn layui-btn-normal" lay-submit lay-filter="demo-val">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>

    <script>
        var $ = layui.$;
        var form = layui.form;

        $(function () {
            bindDepartment()//部门下拉
            bindEnterpriseSelect()//企业下拉
        })

        // 使用layui的layer模块
        layui.use(['form', 'layer'], function () {
            // 表单取值
            layui.$('#component').on('click', function () {
                var data = form.val('demo-val-filter');
            });

            // 提交事件
            form.on('submit(demo-val)', function (data) {
                var field = data.field; // 获取表单字段值
                console.log(field) //在控制台显示值
                // 此处可执行 Ajax 等操作
                $.ajax({
                    type: "post",
                    url: '@ViewBag.RedDragonWrite' + "/api/Enterprises/CreateDepartment",
                    data: JSON.stringify(field),
                    dataType: "json",
                    contentType: "application/json",
                    success: res => {
                        console.log(res)
                        // 处理响应，例如提示成功信息
                        layui.layer.msg(res.msg, { icon: 6, time: 1000 });
                        // 使用setTimeout来延迟关闭操作
                        setTimeout(function () {
                            // 操作成功后关闭当前弹出层
                            var index = parent.layer.getFrameIndex(window.name); // 获取当前弹出层的索引
                            parent.layer.close(index); // 关闭弹出层
                        }, 1000);
                    },
                    error: function (xhr, status, error) {
                        // 处理错误
                        layui.layer.msg('添加失败', { icon: 5, time: 1000 });
                    }
                })
                return false; // 阻止默认 form 跳转
            });
        });

        //部门下拉框绑定
        function bindDepartment() {
            var obj = {
                DepartmentId: location.search.split("=")[1]
            };
            $.ajax({
                url: '@ViewBag.RedDragonWrite' + "/api/Enterprises/SearchDepartment",
                type: 'GET',
                data: obj,
                dataType: 'json',
                success: res => {
                    console.log(res)
                    var options = '<option value="0">无</option>';
                    $.each(res.data, function (index, item) {
                        options = '<option value="' + item.departmentId + '">' + item.departmentName + '</option>';
                    });
                    $('#parentSelect').html(options);
                    form.render('select'); // 更新下拉框渲染
                }
            });
        }

        //企业下拉框绑定
        function bindEnterpriseSelect() {
            $.ajax({
                url: '@ViewBag.RedDragonWrite' + "/api/Enterprises/SearchEnterprise",
                type: 'GET',
                dataType: 'json',
                success: res => {
                    console.log(res)
                    var options = '<option value="0">请选择</option>';
                    $.each(res.data, function (index, item) {
                        options += '<option value="' + item.enterpriseId + '">' + item.enterpriseName + '</option>';
                    });
                    $('#mySelect').html(options);
                    form.render('select'); // 更新下拉框渲染
                }
            });
        }
    </script>
</body>
</html>
